/**
 * Select下拉框插件
 * @authors: haoran.shu
 * @date: 2017-09-24 18:38:16
 */
import $ from "../../element/element.js"

class Select {

  constructor(selector) {
    let os = $.el(selector)

    let rNode = os.parentNode, multiple = os.getAttribute('multiple')
    if(rNode.className.indexOf('tenui-select') !== -1) { // 更新节点渲染
      if(multiple !== null && multiple !== undefined) {
        $.el('tl', rNode).setAttribute('data-multiple', 'multiple')
      }
      for(let i = 0, osl = os.length; i < osl; i++) {
        let is = os[i].getAttribute('selected')
        let isS = false
        if(is !== null && is !== undefined) {
          if(is !== 'false') {
            isS = true
          }
        }
        $.el('dd[data-i="' + i + '"]', rNode).className = (isS ? 'selected' : '')
      }
      return
    }

    // 构建 tenui select 外层节点
    let ts = document.createElement("div")
    ts.className = "ten-select"

    // 构建 文本 显示区域
    let tsd = document.createElement("div")
    tsd.className = "drapdown-toggle"
    tsd.innerHTML = "<span class='select-title'>未选择</span><span class='caret'></span>"

    // 构建 下拉框区域
    let tsi = document.createElement("dl")
    if(multiple !== null && multiple !== undefined) {
      tsi.setAttribute('data-multiple', 'multiple')
    }
    for(let i = 0, osl = os.length; i < osl; i++) {
      let tsiNode = document.createElement('dd')
      tsiNode.setAttribute('data-i', i + '')
      tsiNode.setAttribute('data-value', os[i].value)
      tsiNode.textContent = os[i].textContent
      tsiNode.addEventListener('click', function() {
        let paNode = this.parentNode
        let rootNode = paNode.parentNode.parentNode
        let multi = paNode.getAttribute('data-multiple')
        let textNode = rootNode.querySelector('.select-title')
        let selectOptS = rootNode.querySelector('select')
            [Number(this.getAttribute('data-i'))]
        if(multi === 'multiple') { // 支持多选
          let thisClass = this.className
          let text = textNode.textContent
          if(thisClass === 'selected') { // 已经选择, 取消选择
            this.className = ''
            selectOptS.setAttribute('selected', 'false')
            text = text.replace(this.textContent + ',', "")
            text = text.replace(',' + this.textContent, "")
          } else {
            this.className = 'selected'
            if(text === '未选择') {
              text = this.textContent
            } else {
              text += (',' + this.textContent)
            }
            selectOptS.setAttribute('selected', 'true')
          }
          textNode.textContent = text
        } else { // 单选
          let osNode = paNode.querySelector('.selected')
          if(osNode) {
            osNode.className = ''
          }
          let optionSelectedNode = document.querySelector("option[selected='true']")
          if(optionSelectedNode) {
            optionSelectedNode.setAttribute('selected', 'false')
          }

          selectOptS.setAttribute('selected', 'true')
          this.className = 'selected'
          textNode.textContent = this.textContent
          rootNode.querySelector('.drapdown-toggle').className = 'drapdown-toggle'
          paNode.style.display = 'none'
        }

      })
      tsi.appendChild(tsiNode)
    }

    // 点击切换
    tsd.addEventListener('click', function() {
      let thisClassName = this.className;
      if(thisClassName.indexOf("drapdown-open") !== -1) { // 已经展开
        this.className = "drapdown-toggle"
        $.el('dl', this.parentNode).style.display = "none"
      } else {
        this.className = "drapdown-toggle drapdown-open"
        $.el('dl', this.parentNode).style.display = "block"
      }
    })

    ts.appendChild(tsd)
    ts.appendChild(tsi)
    ts.appendChild(os.cloneNode(true))

    os.parentNode.replaceChild(ts, os)
  }
}

export default Select
